<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试智能体关闭功能</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .test-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            background: #f9f9f9;
        }
        
        .test-button {
            background: #1C64F2;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px 5px;
            transition: all 0.3s ease;
        }
        
        .test-button:hover {
            background: #1557d0;
            transform: translateY(-2px);
        }
        
        .status {
            padding: 15px;
            margin: 15px 0;
            border-radius: 6px;
            font-weight: bold;
        }
        
        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .status.info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        
        .instructions {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
            padding: 15px;
            border-radius: 6px;
            margin: 20px 0;
        }
        
        .code-block {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>🧪 智能体关闭功能测试页面</h1>
        
        <div class="instructions">
            <strong>测试说明：</strong>这个页面用于测试智能体聊天窗口的关闭功能是否正常工作。
        </div>
        
        <div class="test-section">
            <h3>📋 测试步骤</h3>
            <ol>
                <li>点击右下角的蓝色圆形按钮（笑脸图标）打开智能体聊天窗口</li>
                <li>检查聊天窗口右上角是否显示红色关闭按钮（×）</li>
                <li>点击红色关闭按钮，验证聊天窗口是否能够关闭</li>
                <li>重复测试几次，确保功能稳定</li>
            </ol>
        </div>
        
        <div class="test-section">
            <h3>🔧 功能测试</h3>
            <button class="test-button" onclick="testCloseButton()">测试关闭按钮</button>
            <button class="test-button" onclick="checkDifyElements()">检查智能体元素</button>
            <button class="test-button" onclick="forceAddCloseButton()">强制添加关闭按钮</button>
            
            <div id="testStatus"></div>
        </div>
        
        <div class="test-section">
            <h3>📊 测试结果</h3>
            <div id="testResults"></div>
        </div>
        
        <div class="test-section">
            <h3>💡 故障排除</h3>
            <div class="code-block">
// 如果关闭按钮不显示，可以尝试以下方法：

1. 刷新页面
2. 清除浏览器缓存
3. 检查浏览器控制台是否有错误
4. 确保JavaScript已启用
5. 检查网络连接是否正常
            </div>
        </div>
        
        <div class="test-section">
            <h3>📱 响应式测试</h3>
            <p>请在不同屏幕尺寸下测试关闭功能：</p>
            <ul>
                <li>桌面端（1920x1080）</li>
                <li>平板端（768x1024）</li>
                <li>手机端（375x667）</li>
            </ul>
        </div>
    </div>

    <script>
        // 测试关闭按钮功能
        function testCloseButton() {
            const statusDiv = document.getElementById('testStatus');
            const chatWindow = document.getElementById('dify-chatbot-bubble-window');
            const closeBtn = document.querySelector('.dify-close-btn');
            
            if (!chatWindow) {
                statusDiv.innerHTML = '<div class="status error">❌ 未找到智能体聊天窗口</div>';
                return;
            }
            
            if (!closeBtn) {
                statusDiv.innerHTML = '<div class="status error">❌ 未找到关闭按钮</div>';
                return;
            }
            
            // 测试关闭功能
            const originalDisplay = chatWindow.style.display;
            chatWindow.style.display = 'block';
            
            setTimeout(() => {
                closeBtn.click();
                
                setTimeout(() => {
                    if (chatWindow.style.display === 'none') {
                        statusDiv.innerHTML = '<div class="status success">✅ 关闭按钮功能正常！</div>';
                        // 恢复原始状态
                        chatWindow.style.display = originalDisplay;
                    } else {
                        statusDiv.innerHTML = '<div class="status error">❌ 关闭按钮点击无效</div>';
                    }
                }, 100);
            }, 100);
        }
        
        // 检查智能体元素
        function checkDifyElements() {
            const resultsDiv = document.getElementById('testResults');
            const chatWindow = document.getElementById('dify-chatbot-bubble-window');
            const chatButton = document.getElementById('dify-chatbot-bubble-button');
            const closeBtn = document.querySelector('.dify-close-btn');
            
            let results = '<h4>元素检查结果：</h4>';
            
            if (chatWindow) {
                results += '<div class="status success">✅ 聊天窗口元素存在</div>';
                results += `<div class="status info">📱 聊天窗口样式: display=${chatWindow.style.display}, opacity=${chatWindow.style.opacity}</div>`;
            } else {
                results += '<div class="status error">❌ 聊天窗口元素不存在</div>';
            }
            
            if (chatButton) {
                results += '<div class="status success">✅ 聊天按钮元素存在</div>';
            } else {
                results += '<div class="status error">❌ 聊天按钮元素不存在</div>';
            }
            
            if (closeBtn) {
                results += '<div class="status success">✅ 关闭按钮元素存在</div>';
                results += `<div class="status info">🔴 关闭按钮样式: background=${closeBtn.style.background}, z-index=${closeBtn.style.zIndex}</div>`;
            } else {
                results += '<div class="status error">❌ 关闭按钮元素不存在</div>';
            }
            
            resultsDiv.innerHTML = results;
        }
        
        // 强制添加关闭按钮
        function forceAddCloseButton() {
            const chatWindow = document.getElementById('dify-chatbot-bubble-window');
            const statusDiv = document.getElementById('testStatus');
            
            if (!chatWindow) {
                statusDiv.innerHTML = '<div class="status error">❌ 未找到聊天窗口，无法添加关闭按钮</div>';
                return;
            }
            
            // 移除现有的关闭按钮
            const existingBtn = chatWindow.querySelector('.dify-close-btn');
            if (existingBtn) {
                existingBtn.remove();
            }
            
            // 创建新的关闭按钮
            const closeBtn = document.createElement('div');
            closeBtn.className = 'dify-close-btn';
            closeBtn.innerHTML = '×';
            closeBtn.title = '关闭聊天窗口';
            
            closeBtn.style.cssText = `
                position: absolute;
                top: 10px;
                right: 10px;
                width: 28px;
                height: 28px;
                background: #ff4757;
                color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                font-size: 20px;
                font-weight: bold;
                z-index: 10000;
                transition: all 0.3s ease;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
                border: 2px solid white;
                outline: none;
                user-select: none;
            `;
            
            closeBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                chatWindow.style.display = 'none';
                chatWindow.style.opacity = '0';
                chatWindow.style.visibility = 'hidden';
            });
            
            chatWindow.appendChild(closeBtn);
            statusDiv.innerHTML = '<div class="status success">✅ 已强制添加关闭按钮</div>';
            
            // 更新测试结果
            setTimeout(() => {
                checkDifyElements();
            }, 100);
        }
        
        // 页面加载完成后自动检查
        window.addEventListener('load', function() {
            setTimeout(() => {
                checkDifyElements();
            }, 2000);
        });
    </script>
</body>
</html>

